<script setup lang="ts">
import logicDrawer from '@/components/logic-drawer/index.vue'
import { ContentEnum } from '@/components/logic-drawer/logic-drawer';
const logicDrawerRef = ref<InstanceType<typeof logicDrawer>>()
const router = useRouter()
const openTable=()=>{
    router.push({name:'table-home'})
}
const openPage=()=>{
    logicDrawerRef.value?.open({title:'分页',content:ContentEnum.PAGINATION})
}
const openPageTable=()=>{
    router.push({name:'page-table-home'})
}
</script>
<template>
    <div class="w-full h-full">
        <div class="w-full pl-60px pr-60px pt-100px flex flex-row justify-between">
            <range-item @click="openPage">
                <template #header >
                    <div class="w-full h-full bg-[#67C23A] text-white">Page</div>
                </template>
                <template #body>
                    <div class="w-full h-full">
                        分页封装,具体思路看代码
                    </div>
                </template>
            </range-item>
            <range-item @click="openTable">
                <template #header >
                    <div class="w-full h-full bg-[#67C23A] text-white">Table</div>
                </template>
                <template #body>
                    <div class="w-full h-full">
                        常用的功能封装
                    </div>
                </template>
            </range-item>
            <range-item @click="openPageTable">
                <template #header >
                    <div class="w-full h-full bg-[#67C23A] text-white">PageTable</div>
                </template>
                <template #body>
                    <div class="w-full h-full">
                        常用的功能封装
                    </div>
                </template>
            </range-item>
            <range-item/>
        </div>
        <div class="w-full pl-60px pr-60px pt-100px flex flex-row justify-between">
            <range-item/>
            <range-item/>
            <range-item/>
            <range-item/>
        </div>
        <logic-drawer ref="logicDrawerRef"/>
    </div>
</template>